<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页文字传输助手</title>
    <link rel="stylesheet" href="static/element.css">
    <style>
        footer {
            font-size: 14px;
            position: fixed;
            bottom: 0;
            width: 100%;
            background-color: #f5f5f5;
            padding: 3px 0;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-row>
            <el-col :span="18" :offset="3">
                <h1 style="text-align: center;">网页文字传输助手</h1>
                <el-form ref="form" :model="info" label-width="80px">
                    <el-form-item label="消息">
                        <el-input type="textarea" v-model="info.message" :rows="5"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSend">发送</el-button>
                    </el-form-item>
                </el-form>

                <el-timeline :reverse="true">
                    <el-timeline-item
                    v-for="(v, k) in list"
                    :key="k"
                    style="white-space: pre-line;"
                    :timestamp="v.timestamp">
                    {{v.message}}
                    </el-timeline-item>
                </el-timeline>
            </el-col>
        </el-row>
        <div style="height: 60px;"></div>
        <footer>
            <p>来源：您的网站名称或来源信息</p>
        </footer>
    </div>
<script src="static/vue.min.js"></script>
<script src="static/element.js"></script>

<script>

    var app = new Vue({
        el: '#app',
        data: {
            ws:'',
            info:{
                message:''
            },
            list:[]
        },
        mounted: function() {
            // 在这里执行你想在实例加载完毕后执行的操作
            console.log('Vue实例已挂载');
            this.ws = new WebSocket("ws://localhost:8080/ws");
            this.ws.onopen = function() {
                console.log("WebSocket is connected.");
            };
            this.ws.onmessage = (event) => {
                let item = {}
                timestamp = new Date().getTime();
                item.timestamp = this.getDate(timestamp);
                item.message = event.data;
                this.list.push(item);
            };
            this.ws.onclose = function() {
                console.log("WebSocket is closed.");
            };
        },
        methods: {
            onSend(){
                this.ws.send(this.info.message);
                this.info.message = "";
            }
            ,getDate(timestamp){
                const date = new Date(timestamp);
                const year = date.getFullYear();
                const month = this.padZero(date.getMonth() + 1); // 月份从0开始，需要加1
                const day = this.padZero(date.getDate());
                const hours = this.padZero(date.getHours());
                const minutes = this.padZero(date.getMinutes());
                const seconds = this.padZero(date.getSeconds());

                const datetime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
                return datetime;
            }
            ,padZero(num) {
                return num.toString().padStart(2, '0');
            }
        }
    })

</script>
</html>
